<template>
  <dv-border-box-3 class="box" :color="['#339ebe', '#3872ac']">
    <dv-water-level-pond
      :config="config"
      style="width: 200px; height: 200px; margin: 12px 0 0 70px"
    />
    <span>CAM</span>
    <dv-border-box-2 class="text" :color="['#339ebe', '#3872ac']">
      <p>
        {{ $t('checkbox.Running') }}(
        {{
          Math.round(
            (AnalyseDayList2.onTime /
              (AnalyseDayList2.onTime +
                AnalyseDayList2.offTime +
                AnalyseDayList2.noTime +
                AnalyseDayList2.ngTime)) *
              100
          )
        }}%)
      </p>
      <p>
        {{ $t('checkbox.Idle') }}({{
          Math.round(
            (AnalyseDayList2.noTime /
              (AnalyseDayList2.onTime +
                AnalyseDayList2.offTime +
                AnalyseDayList2.onTime +
                AnalyseDayList2.ngTime)) *
              100
          )
        }}%)
      </p>
      <p>
        {{ $t('checkbox.Failure') }}({{
          Math.round(
            (AnalyseDayList2.ngTime /
              (AnalyseDayList2.onTime +
                AnalyseDayList2.offTime +
                AnalyseDayList2.noTime +
                AnalyseDayList2.onTime)) *
              100
          )
        }}%)
      </p>
      <p>
        {{ $t('checkbox.Downtime') }}({{
          Math.round(
            (AnalyseDayList2.offTime /
              (AnalyseDayList2.onTime +
                AnalyseDayList2.onTime +
                AnalyseDayList2.noTime +
                AnalyseDayList2.ngTime)) *
              100
          )
        }}%)
      </p>
    </dv-border-box-2>
  </dv-border-box-3>
</template>

<script>
export default {
  props: {
    AnalyseDayList2: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      config: {
        data: [],
        shape: "round",
        waveHeight: 30,
        waveOpacity: 0.5,
        waveNum: 2,
        colors: ["#42CCC1", "#4BFAC6"],
      },
    };
  },
  watch: {
    AnalyseDayList2: {
      handler(newVal) {
        this.AnalyseDayList2 = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.config.data = [];
    let data = this.AnalyseDayList2;
    this.config.data[0] = Math.round(
      (data.onTime / (data.onTime + data.offTime + data.noTime + data.ngTime)) *
        100
    );
    this.config.data[1] = 57;
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: 29vh;
  margin-left: 30px;
  padding-top: 40px;
}
.echarts {
  width: 100%;
  height: 28vh;
}

span {
  font-size: 16px;
  font-weight: 700;
  color: #75e9f3;
  position: absolute;
  margin: -220px 0 0 20px;
}
.text {
  position: absolute;
  margin: -70px 0 0 280px;
  padding: 5px 0 0 14px;
  font-size: 12px;
  height: 105px;
  width: 90px;
  color: #42ccc1;
  display: flex;
  flex-direction: column;
  p {
    line-height: 8px;
  }
  // p:nth-child(1) {
  //   color: #06c506;
  // }
  // p:nth-child(2) {
  //   color: #bba90c;
  // }
  // p:nth-child(3) {
  //   color: #df0808;
  // }
  // p:nth-child(4) {
  //   color: #929090;
  // }
}
</style>
